Vue.component('topnav',{
    template:`<div class="topnav">
            <div class="topnav_bd w1210 bc">
            <div class="topnav_left">
                
            </div>
            <div class="topnav_right fr">
                <ul>
                    <li v-if='name==null'>您好，欢迎来到商城！[<a href="login.html">登录</a>] [<a href="register.html">免费注册</a>] </li>
                    <li v-if='name!=null'>您好，{{name}}！欢迎来到商城！[<a href="order.html">我的订单</a>][<a href="javascript:void(0);" @click="loginOut">退出</a>] </li>                    
                    <li class="line">|</li>
                    <li>我的订单</li>
                    <li class="line">|</li>
                    <li>客户服务</li>
                </ul>
            </div>
        </div>
    </div>`,
    //组件定义函数不能使用data:{}方式，必须采用以下方式
    data:function(){
        return {
            name:localStorage.getItem('name')
        }
    },
    methods:{
        //退出
        loginOut(){
           //清空数据，设置name为null
           localStorage.removeItem('token')
           localStorage.removeItem('name')
           this.name=null
        }
    }
})